<template>
    <div class="login">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onLogin">登录</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "login",
        data() {
            return {
                form: {
                    username: null,
                    password: null
                }
            }
        },
        methods: {
            onLogin() {
                axios.post('http://127.0.0.1:8000/api/v1/auth/', this.form, {withCredentials: true}).then((res) => {
                    console.log(res);
                    if (res.status === 200) {
                        // 将后端传递过来的username,token值进行存储
                        sessionStorage.setItem("username", res.data.username);  // 用户username
                        sessionStorage.setItem("token", res.data.token);  // token值

                        console.log("1111");
                        console.log(sessionStorage.getItem("username"));
                        console.log(sessionStorage.getItem("token"));
                        // 跳转主页
                        this.$router.push("/");
                        this.$message.success("登录成功")
                    } else {
                        console.log(res);
                        this.$message.error("用户名或密码错误")
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 50%;
        margin: 0 auto;
    }
</style>
